<template>
	<view class="contentText">
		<!-- <cu-custom bgColor="bg-gradual-blue" :isBack="false">
			<block slot="content">动态</block>
		</cu-custom> -->
		<un-login v-if="unLogin">您还没登录，请登录</un-login>
		<!-- mescroll组件，官网http://www.mescroll.com/uni.html -->
		<!-- 初始化操作mescrollInit,下拉刷新是downCallback,向上滑是upCallback -->
		<view class="titleType">
			<view class="item" :class="active == 1?'active':''" @tap.stop="changeActive(1)">
				推荐
			</view>
			<view class="item" :class="active == 0?'active':''" @tap.stop="changeActive(0)">
				关注
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
			<!--  @init="mescrollInit" @down="downCallback" @up="upCallback"为固定值,不可删改(与mescroll-mixins保持一致) 
			:down="downOption" :up="upOption" 绝大部分情况无需配置 
			:top="顶部偏移量" :bottom="底部偏移量" :topbar="状态栏" :safearea="安全区" (常用)
			字节跳动小程序 ref="mescrollRef" 必须配置 
			此处支持写入原生组件 -->
			<view class="cu-card case isCard">
				<view class="cu-item shadow shadowItem" v-for="(item,index) in list" :key="index"
					@click="goDetail(item._id)">
					<view v-for="(itemName,indexName) in item.userInfo" :key="indexName">
						<view class="cu-list menu-avatar">
							<view class="cu-item">
								<view class="cu-avatar lg" style="background-color: transparent;">
									<image class="cu-avatar lg borderRadio" style="background-color: transparent;"
										:src="itemName.avatar" mode=""></image>
								</view>
								<view class="content flex-sub">
									<view>{{itemName.nickname}}</view>
									<view>
										<text>{{ typeName(itemName.userType) }}</text>
										<text style="color: #B9BBBE;margin-left: 20upx;">{{item.newTime}}</text>
										<text v-if="item.address || item.addinfo"
											style="color: #B9BBBE;">-{{item.addinfo || item.address || ''}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 视频 -->
					<view class="image" v-if="item.srcVideo">
						<video :src="item.srcVideo"></video>
					</view>
					<!-- 图片 -->
					<view class="image" v-if="item.imgList.length == 1">
						<image mode="aspectFit" :src="item.imgList[0].imgurl" @tap.stop="openImg(item.imgList,0)">
						</image>
					</view>
					<view class="image" v-if="item.imgList.length > 1">
						<view class="imagesList">
							<image mode="aspectFit" v-for="(itemImg,indexImg) in item.imgList" :key="indexImg"
								@tap.stop="openImg(item.imgList,indexImg)" :src="itemImg.imgurl"></image>
						</view>
					</view>
					<!-- 文字 -->
					<view class="text-content padding-sm text-cut " style="width:100%;font-size: 20px;">
						{{item.value || item.input}}
					</view>
					<view class="content flex-sub">
						<view class="text-gray flex justify-around padding-bottom">
							<!-- <view v-for="(items,index) in item.userInfo">
								<view class="cu-avatar round lg"
									:style="'backgroundImage:url('+ items.avatar +'?x-oss-process=image/resize,m_fixed,w_100' +')'">
								</view>
							</view> -->
							<!-- 观看 -->
							<!-- <view>
								<text class="cuIcon-attentionfill "></text> {{item.view_num >= 0 ? item.view_num : 0}}
							</view> -->
							<!-- 评论 -->
							<view>
								<text class="cuIcon-messagefill"></text>{{item.comment_num >= 0 ? item.comment_num : 0}}
							</view>
							<!-- 点赞 -->
							<view>
								<text class="cuIcon-appreciatefill"></text> {{item.love_num >= 0 ? item.love_num : 0}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<view type="" class="fixed-top">
			<navigator url="../add/add" style="height: 100%;width: 100%;">
				<view class="" style="height: 100upx;line-height: 100upx;">
					+
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import list from '../../common/new.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin,混入js
		data() {
			return {
				unLogin: false,
				//未分类总列表数据
				list: [],
				upOption: {
					page: {
						num: 0,
						size: 10,
						time: null
					},
					noMoreSize: 4
				},
				response: '',
				navvalue: "",
				navlist: ['最新', '图片', '你好'],
				active: 1,
				typeNameList: list,
			}
		},
		onLoad: function(option) {

		},
		onShow() {
			// onshow出现在屏幕一次就触发一次。
			//start 检测登录
			this.ssuserid = getApp().globalData.ssuserid;
			this.unLogin = getApp().globalData.unLogin;
			if (this.ssuserid == '') {
				return false;
			}
			//End 检测是否登录 
		},
		methods: {
			changeActive(num) {
				this.active = num
				this.mescroll.resetUpScroll()
			},
			typeName(item) {
				if (item) {
					return this.typeNameList[item].title
				}
			},
			onValueChange(e) {
				console.log(e.currentItem);
			},
			/*下拉刷新的回调*/
			downCallback() {
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调*/
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 设置为4
				var fenlei = this.fenlei;
				var that = this;
				var userInfo = uni.getStorageSync('userInfo')
				var active = 'index'
				if (that.active == 0) {
					active = 'follow'
				}
				uniCloud.callFunction({
					name: "bbs_topic",
					data: {
						cloudAction: active,
						/* index为全部文章 */
						params: {
							start: (pageNum - 1) * pageSize,
							limit: pageSize,
							username: '',
							createTime: fenlei,
							id: userInfo._id
						}
					},
					success(response) {
						let res = response.result.data
						let curPageData = res.list
						let curPageLen = res.list.length //当前页返回的数据条数
						let totalSize = res.total

						for (var i = 0; i < curPageData.length; i++) {
							var dateTime = new Date(curPageData[i].createTime).getTime()
							var nowTime = new Date().getTime()
							if ((nowTime - dateTime) < 3600000) {
								curPageData[i].newTime = '一小时内'
							} else if ((nowTime - dateTime) < 7200000) {
								curPageData[i].newTime = '一小时前'
							} else if ((nowTime - dateTime) < 10800000) {
								curPageData[i].newTime = '三小时内'
							} else if ((nowTime - dateTime) < 86400000) {
								curPageData[i].newTime = '今天'
							} else if ((nowTime - dateTime) < 172800000) {
								curPageData[i].newTime = '昨天'
							} else {
								curPageData[i].newTime = curPageData[i].createTime
							}
						}

						//设置列表数据
						if (page.num == 1) that.list = []; //如果是第一页需手动置空列表

						that.list = that.list.concat(curPageData); //列表追加新数据		

						// 控制台输出list
						// 请求成功,隐藏加载状态
						that.mescroll.endBySize(curPageLen, totalSize)
					},
					fail() {
						//  请求失败,隐藏加载状态
						console.log('请求失败');
						that.mescroll.endErr()
					}
				})
				// 此处仍可以继续写其他接口请求...
				// 调用其他方法...
			},
			goDetail: function(id) {
				uni.navigateTo({
					url: "../../bbs/topic/show?id=" + id
				})
			},
			openImg(item, index) {
				var imageList = []
				for (var indexs in item) {
					imageList[indexs] = item[indexs].imgurl
				}
				uni.previewImage({
					current: index,
					urls: imageList,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
		},
		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
			return {
				title: '动态',
				path: "/pages/dynamic/dynamic"
			}
		},

		/**
		 * 分享到朋友圈
		 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
		 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
		 */
		onShareTimeline() {
			return {
				title: '动态',
				path: "/pages/dynamic/dynamic"
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contentText {
		background-color: #F4F4F4;
	}

	@media screen and (min-width: 1000px) {
		page {}
	}

	// image {
	// 	border-radius: 5px !important;
	// }

	.cu-item {
		border-radius: 5px !important;
		// background-color: #ececec;
		margin-bottom: 10px;
	}

	.big {
		width: 10px;
		height: 100px;
		background-color: #dcdcdc;
	}

	.title {
		text-align: center;
		width: 100%;
	}

	.shadowItem {
		margin-bottom: 20upx;
		// border-bottom: 2upx solid #c0c0c0;
	}

	.text-content {
		line-height: 1.6;
		margin-left: 150upx;
	}

	.borderRadio {
		border-radius: 100upx;
	}

	.fixed-top {
		position: fixed;
		width: 100rpx;
		height: 100rpx;
		right: 30rpx;
		bottom: 30rpx;
		background: #fff;
		box-shadow: 0px 0px 7px 3px #f0f0f0;
		border-radius: 50%;
		z-index: 9;
		text-align: center;
		font-size: 26upx;
		padding-left: 0;
		padding-right: 0;
		line-height: 1.3;
	}

	.titleType {
		display: flex;
		background-color: #FFFFFF;
		height: 50upx;
		line-height: 50upx;

		.item {
			vertical-align: bottom;
			margin: 0 20upx;
		}
	}

	.active {
		font-size: 40upx;
	}
</style>
